<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <link rel="stylesheet" href="../../views/ccw/g-personalcenter.css">
    <link rel="stylesheet" href="../../views/ccw/foot.css">
    <link rel="stylesheet" href="../../views/slx/css/nav.css">
    <link rel="stylesheet" href="/dev/views/cxy/css/playerto.css">
    <link rel="stylesheet" href="../../views/ccw/vip.css">
    <style type="text/css">
        #content, #content2, #content3 {
            background: -webkit-linear-gradient(left, rgba(89, 114, 192, 0.8), rgba(89, 114, 192, 0.2));
            background: -o-linear-gradient(right, rgba(90, 115, 192, 0.8), rgba(89, 114, 192, 0.2));
            background: -moz-linear-gradient(right, rgba(89, 114, 192, 0.8), rgba(89, 114, 192, 0.2));
            background: linear-gradient(to right, rgba(89, 114, 192, 0.8), rgba(89, 114, 192, 0.2));
            background-size: 400% 400%;
            animation: gradientBG 5s ease infinite;
        }

        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

    </style>
    <style type="text/css">
        .container{
            margin:0;
            padding:0;
            background-color:transparent;
            width:100%;
            height:200px;
            z-index:-1;
            position:fixed;
            bottom:0;
            left:0;}
    </style>
</head>
<body>
<div id="app"></div>

<div class="shuxian">
    <div id="header">
        <h1>音乐VIP会员</h1>
        <p>尽情享受无广告、高音质的音乐体验！</p>
    </div>


<form id="vip-form">
            <div id="content">
                <h2 class="names" value="普通会员">普通会员</h2>
                <div class="vip-benefits">
                    <ul>
                        <li>离线下载歌曲</li>
                        <li>专属会员活动和奖励</li>
                        <li>优先试听新歌曲</li>
                    </ul>
                </div>
                <div class="price-options">
                    <div id="monthly" class="price-box" onclick="selectPrice('monthly')">
                        <p>每月价格：9元</p>
                    </div>
                    <div id="yearly" class="price-box2" onclick="selectPrice('yearly')">
                        <p>每年价格：88元</p>
                    </div>
                </div>
                <div class="payment-option alipay3">
                    <p>支付宝支付</p>
                    <p class="alipay-price3">点击价格按钮点击开通即可听到你想要的歌曲！！！</p>
                    <div class="qrcode alipay-qrcode3">
                        <p>新人优惠：只有十五分钟呦，抓紧把握呦！！！亲</p>
                    </div>
                    <div class="alipay-countdown"></div>
                </div>

                <button type="button" class="cta-button" onclick="submitVipForm()">立即开通</button>

        </div>
        <input type="hidden" name="selectedPrice" id="selected-price">
    </form>

    <div id="content2">
        <h2>超级会员</h2>
        <div class="vip-benefits">
            <ul>
                <li>畅听高品质音乐</li>
                <li>离线下载歌曲</li>
                <li>专属会员活动和奖励</li>
                <li>优先试听新歌曲</li>
            </ul>
        </div>
        <div class="price-options">
            <div id="monthly2" class="price-box" onclick="selectPrice('monthly2')">
                <p>每月价格：14元</p>
            </div>
            <div id="yearly2" class="price-box2" onclick="selectPrice('yearly2')">
                <p>每年价格：118元</p>
            </div>
        </div>
        <div class="payment-option alipay3">
            <p>支付宝支付</p>
            <p class="alipay-price3">点击价格按钮点击开通即可听到你想要的歌曲！！！</p>
            <div class="qrcode alipay-qrcode3">
                <p>新人优惠：只有十五分钟呦，抓紧把握呦！！！亲</p>
            </div>
            <div class="alipay-countdown"></div>
        </div>
        <button type="button" class="cta-button" onclick="submitVipForm()">立即开通</button>
    </div>

    <div id="content3">
        <h2>永久会员</h2>
        <div class="vip-benefits">
            <ul>
                <li>永久无限制畅听高品质音乐</li>
                <li>离线下载歌曲</li>
                <li>专属会员活动和奖励</li>
                <li>优先试听新歌曲</li>
            </ul>
        </div>
        <div class="price-options">
            <div id="yearly3" class="price-box2" onclick="selectPrice('yearly3')">
                <p>永久价格：368元</p>
            </div>
        </div>
        <div class="payment-option alipay3">
            <p>支付宝支付</p>
            <p class="alipay-price3">点击价格按钮点击开通即可听到你想要的歌曲！！！</p>
            <div class="qrcode alipay-qrcode3">
                <p>新人优惠：只有十五分钟呦，抓紧把握呦！！！亲</p>
            </div>
            <div class="alipay-countdown"></div>
        </div>

        <button type="button" class="cta-button" onclick="submitVipForm()">立即开通</button>
    </div>
</div>




<!-- 尾部 -->
<div class="foot">
    <div class="copy">
        <p class="link" id="music-link">
            <a href="#" class="item sf">服务条款</a>
            <span class="line">|</span>
            <a href="#" class="item sf">隐私政策</a>
            <span class="line">|</span>
            <a href="#" class="item sf">儿童隐私政策</a>
            <span class="line">|</span>
            <a href="#" class="item sf">版权投诉</a>
            <span class="line">|</span>
            <a href="#" class="item sf">广告合作</a>
            <span class="line">|</span>
            <a href="#" class="item sf">联系我们</a>
            <span class="line">|</span>
        </p>
    </div>
</div>

<<<<<<< HEAD
<!-- 必须先引入jquery.min.js -->
=======
<div style="height: 300px"></div>

>>>>>>> b7556ad19e285523275f63d8182c1bf76b3f187b
<script src="/dev/plugins/jquery.min.js"></script>
<script src="/dev/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
<script src="/dev/plugins/layui/layui.js"></script>
<script src="/dev/views/cxy/js/xiaobofang/jquery.marquee.min.js"></script>
<!--<script src="/dev/views/ccw/gjs/vip.js"></script>-->
<script>
    var name = localStorage.getItem("username");
    var uid = localStorage.getItem("uid");
    $(function () {
        $("#app").load('/dev/views/slx/nav.html');
    });

    var selectedPrice = ""; // 保存所选价格的内容
    function selectPrice(price) {
        // 重置所有价格模块的样式
        $(".price-box, .price-box2").removeClass("selected");

        // 根据选择的价格修改模块的样式
        $("#" + price).addClass("selected");

        // 更新所选价格的内容
        selectedPrice = $("#" + price + " p").text();
    }

    function submitVipForm() {
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var h = myDate.getHours();       //获取当前小时数(0-23)
        var m = myDate.getMinutes();     //获取当前分钟数(0-59)
        if (m < 10) m = '0' + m;
        var s = myDate.getSeconds();
        if (s < 10) s = '0' + s;
        var now = year + '-' + month + "-" + date + " " + h + ':' + m + ":" + s;
        // 将所选价格的内容赋值给隐藏的 input 元素
        $("#selected-price").val(selectedPrice);

        // 提交表单
        var formData = $('#vip-form').serialize();
        var decodedFormData = decodeURIComponent(formData).split("=")[1];
        var price = decodedFormData.split("：")[1].split("元")[0];

        var h2Element = document.querySelector('.names');
        var names = h2Element.getAttribute('value');
        console.log(names);
        console.log(price);
        console.log(uid);
        console.log(now);
        var nae;
        if(price==9)
        {
            nae="普通会员月卡"
        }else if(price==88)
        {
            nae="普通会员年卡"
        }else if (price==14)
        {
            nae="超级会员月卡"
        }else if (nae==118)
        {
            nae="超级会员年卡"
        }else if (nae==368)
        {
            nae="永久会员"
        }




            window.location.href =`/dev/mony/alipay/${uid}/${price}/${now}/${names}/${nae}`


    }



</script>
<script>
    countdown("alipay-countdown", 15, 0); // 倒计时15分钟
    function countdown(elementClass, minutes, seconds) {
        var elements = document.getElementsByClassName(elementClass);

        // 开始倒计时
        Array.prototype.forEach.call(elements, function (element) {
            // 计算总秒数
            var totalSeconds = minutes * 60 + seconds;

            // 更新倒计时文本
            function updateCountdown() {
                // 计算剩余分钟和秒数
                var remainingMinutes = Math.floor(totalSeconds / 60);
                var remainingSeconds = totalSeconds % 60;

                // 更新倒计时文本
                element.innerHTML = remainingMinutes + "分" + remainingSeconds + "秒";

                // 减少总秒数
                totalSeconds--;

                // 如果倒计时结束，清除定时器并执行相应操作
                if (totalSeconds < 0) {
                    clearInterval(intervalId);
                    // TODO: 倒计时结束后的操作
                }
            }

            // 更新倒计时
            updateCountdown();

            // 每秒更新一次倒计时
            var intervalId = setInterval(updateCountdown, 1000);
        });
    }
</script>
</body>
</html>